<template>
  <el-dialog
    title="详细计划"
    v-model="visible"
    center
    @close="visible = false"
    custom-class="planting"
  >
    <div class="dislogBox">
      <div class="PlanMain">
        <el-descriptions title="属性" :column="1">
          <el-descriptions-item label="图片：" label-class-name="PlanMainItem">
            <img :src="lists.PhotoURL.slice(1, -1)" alt="" class="imgPlan" />
          </el-descriptions-item>
          <el-descriptions-item
            label="追溯码："
            label-class-name="PlanMainItem"
          >
            {{ lists.p?.TraceabilityCode }}
          </el-descriptions-item>
          <el-descriptions-item label="设施：" label-class-name="PlanMainItem">
            {{ lists?.facility_name }}
          </el-descriptions-item>
          <el-descriptions-item
            label="作物品种："
            label-class-name="PlanMainItem"
          >
            {{ lists.p?.CropVarieties }}
          </el-descriptions-item>
          <el-descriptions-item
            label="种植面积："
            label-class-name="PlanMainItem"
          >
            {{ lists.p?.PlantingArea }}平方米
          </el-descriptions-item>
          <el-descriptions-item label="种子：" label-class-name="PlanMainItem">
            {{ lists.p?.Seed }}
          </el-descriptions-item>
          <el-descriptions-item
            label="种植方案："
            label-class-name="PlanMainItem"
          >
            {{ lists?.name }}
          </el-descriptions-item>
          <el-descriptions-item
            label="种植开始时间："
            label-class-name="PlanMainItem"
          >
            {{ formatDateTimes(lists.p?.PlantingStartTime) }}
          </el-descriptions-item>
          <el-descriptions-item
            label="实际结束时间："
            label-class-name="PlanMainItem"
          >
            {{ formatDateTimes(lists.p?.ActualEndTime) }}
          </el-descriptions-item>
          <el-descriptions-item
            label="负责人："
            label-class-name="PlanMainItem"
          >
            {{ lists.p?.PersonInCharge }}
          </el-descriptions-item>
          <el-descriptions-item label="技工：" label-class-name="PlanMainItem">
            {{ lists.p?.Mechanic }}
          </el-descriptions-item>
        </el-descriptions>
      </div>
      <div class="planTable">
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="id" width="60" label="序号" />
          <el-table-column prop="NodeName" label="节点名称" />
          <el-table-column prop="start" width="200px" label="开始时间" />
          <el-table-column prop="end" width="200px" label="结束时间" />
          <el-table-column prop="children" width="200px" label="其他">
            <template #default="scope">
              <div v-for="(item, index) in scope.row.children" :key="index">
                {{ item.cond }}，{{ item.name }}
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="visible = false">关 闭</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import { computed, reactive, toRefs, watch } from "vue";
import { formatDateTimes } from "../utils/index";

export default {
  name: "DialogAddSee",
  props: {
    dialogData: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  setup(props) {
    const state = reactive({
      tableData: [], // 数据列表
      visible: false,
      lists: {},
    });

    watch(
      computed(() => props.dialogData),
      (e) => {
        state.lists = e;
        console.log("eeee", e);
        state.tableData = e.p.Node.map((item, index) => {
          return {
            id: index + 1,
            start: formatDateTimes(item.start0),
            end: formatDateTimes(item.end0),
            NodeName: item.NodeName,
            status: item.nodeType,
            children: item.children,
          };
        });
      }
    );

    // 开启弹窗
    const open = () => {
      state.visible = true;
    };

    return {
      ...toRefs(state),
      open,
      formatDateTimes,
    };
  },
};
</script>

<style scoped>
.dislogBox {
  display: flex;
}
.PlanMain {
  margin-right: 30px;
  border-right: 1px solid #ececec;
}
.planTable {
  flex: 1;
}

:deep(.PlanMainItem) {
  display: inline-block;
  text-align: right;
  width: 100px;
}
:deep(.el-descriptions__body tr) {
  font-size: 14px;
  padding-bottom: 0;
}
:deep(.el-descriptions__body td) {
  padding-bottom: 0;
  line-height: 40px;
}
:deep(.el-dialog__header) {
  text-align: center;
}
</style>
<style>
.el-dialog {
  width: 700px !important;
}
.imgPlan {
  display: inline-block;
  max-width: 50px;
  max-height: 50px;
}
</style>
